<template>
    <div>
        <a-menu
            v-if="menuHeaderType === 'double'"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            theme="dark"
            @click="chioceMenu"
        >
            <a-menu-item v-for="item in menuNavData" :key="item.path" :index="item.key">
               {{item.name}}
            </a-menu-item>
            <!-- <a-sub-menu key="sub1">
        <template #title>Navigation One</template>
        <a-menu-item key="5">Option 5</a-menu-item>
        <a-menu-item key="6">Option 6</a-menu-item>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>Navigation Two</template>
        <a-menu-item key="9">Option 9</a-menu-item>
        <a-menu-item key="10">Option 10</a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
        </a-sub-menu>
            </a-sub-menu>-->
        </a-menu>
    </div>
</template>
<script lang="ts">
import { defineComponent, watch, onMounted, computed, ref, reactive, toRefs,getCurrentInstance } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showMenuModel } from '@/store/index.ts'
export default defineComponent({
    name: 'nav-left',
    emits: ['collData'],
    setup(props, { attrs, emit }) {
        const $store = useStore()
        const router = useRouter()
        const { proxy } = getCurrentInstance();// proxy  等于 this
        const selectedKeys = ref<string[]>(['/business-list']);
        const menuHeaderType = ref<string>($store.getters.getMenuType)
        const menuNavData = ref<showMenuModel[]>([])
        const handleClick = (e: Event) => {
            console.log('click', e);
        };
        const titleClick = (e: Event) => {
            console.log('titleClick', e);
        };
        const chioceMenu = (val) =>{
            console.log(val)
            router.push({path:val.key})
        }
        const initActive = async()=>{
            let pathData =  await proxy.$router.currentRoute.value.path
            console.log(pathData)
            if (pathData==='/home') {
                selectedKeys.value = []
            } else {
                selectedKeys.value = [pathData]
            }
        }


        
        const initMenu = (id:any) => {
            let menuArr = $store.getters.getMenu
            let arr = []
            if (id) {
                for (var i = 0; i < menuArr.length; i++) {
                    if (menuArr[i].parentId && id == menuArr[i].parentId) {
                        arr.push(menuArr[i])
                    }
                }
               
            } else {
                arr = menuArr
            }
            selectedKeys.value = [arr[0].path]
            menuNavData.value = arr
            initActive()
        }
        onMounted(() => {
            if (menuHeaderType.value === 'double') {
                console.log(999695)
                initMenu($store.getters.getHeaderActive.id)
            } else {
                initMenu()
            }
        })
         watch(() => $store.state.headerActive, (val, old) => {
            initMenu(val.id)
        })
        return {
            selectedKeys,
            menuHeaderType,
            menuNavData,
            chioceMenu,
            initMenu,
            handleClick,
            titleClick
        }
    }
})
</script>
<style lang="scss" scoped>
</style>